<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2025-07-02 21:36:54
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2025-07-03 22:11:02
 * @FilePath: /book-manage-angular/src/app/components/header/header.component.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- app-header.component.html -->
<header class="header">
  <div class="header-content">
    <div class="brand-title">
      <h1>图书馆管理系统</h1>
    </div>

    <div class="nav-container">

      <nav class="navigation">

        <div class="nav-item" [ngClass]="{ 'active': currentRoute === '/home' }" (click)="navigate('home')">
          <div class="nav-icon">
            <i nz-icon nzType="home"></i>
          </div>
          <span>系统首页</span>
        </div>
        <div class="nav-item" [ngClass]="{ 'active': currentRoute === '/books' }" (click)="navigate('books')">
          <div class="nav-icon">
            <i nz-icon nzType="file-text"></i>
          </div>
          <span>图书目录</span>
        </div>
        <div class="nav-item" [ngClass]="{ 'active': currentRoute === '/inventory' }" (click)="navigate('inventory')">
          <div class="nav-icon">
            <i nz-icon nzType="redo"></i>
          </div>
          <span>库存管理</span>
        </div>
        <div class="nav-item" [ngClass]="{ 'active': currentRoute === '/order' }" (click)="navigate('order')">
          <div class="nav-icon">
            <i nz-icon nzType="line-chart"></i>
          </div>
          <span>订单处理</span>
        </div>
        <div class="nav-item" [ngClass]="{ 'active': currentRoute === '/catalog' }" (click)="navigate('catalog')">
          <div class="nav-icon">
            <i nz-icon nzType="menu"></i>
          </div>
          <span>分类管理</span>
        </div>
      </nav>

      <app-user-info
      [userInfo]="userInfo"
      (logout)="logout()"
    ></app-user-info>


    </div>
  </div>
</header>